<template>
  <el-form-item
    :label="name"
    :prop="code"
  >
    <div v-if="pageData.mode==='details'" class="detail-show p-10 radius-4" v-html="val" />
    <div v-else class="w-full radius-4">
      <TinymceEditor ref="te" v-model="val" class="radius-4" />
    </div>
  </el-form-item>
</template>

<script>
import TinymceEditor from "@/components/editor/tinymce/TinymceEditor.vue"

export default {
  name: 'IkFormEditor',
  components: { TinymceEditor },
  inject: ["pageData"],
  model: {
    // 属性
    prop: 'value',
    // 事件
    event: 'change'
  },
  props: {
    code: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    edit: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      val: null
    }
  },
  watch: {
    val(val) {
      this.$emit("change", val)
    },
    value: {
      handler(value, oldValue) {
        this.val = value
        this.$refs.te.init(value)
      }
    }
  },
  created() {
    this.val = this.value
  }
}
</script>
